<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人社保计算软件-2017117205邓子琪</title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		 
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		 
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		
		<script>
			//JS代码用于网页和用户的交互，写在head里
			function calc(){
				// document代表目前这整个网页
				sal=document.getElementById("salary").value;
				salnum=parseInt(sal);
				
				gr1=salnum*0.08;
				document.getElementById("gr1").innerText=gr1;
				gs1=salnum*0.2;
				document.getElementById("gs1").innerText=gs1;
				
				gr2=salnum*0.02;
				document.getElementById("gr2").innerText=gr2;
				gs2=salnum*0.06;
				document.getElementById("gs2").innerText=gs2;
				
				gr3=salnum*0.005;
				document.getElementById("gr3").innerText=gr3;
				gs3=salnum*0.015;
				document.getElementById("gs3").innerText=gs3;
				
				gr4=salnum*0;
				document.getElementById("gr4").innerText=gr4;
				gs4=salnum*0.005;
				document.getElementById("gs4").innerText=gs4;
				
				gr5=salnum*0;
				document.getElementById("gr5").innerText=gr5;
				gs5=salnum*0.008;
				document.getElementById("gs5").innerText=gs5;
				
				gr6=salnum*0.12;
				document.getElementById("gr6").innerText=gr6;
				gs6=salnum*0.12;
				document.getElementById("gs6").innerText=gs6;
				
				grTotal=gr1+gr2+gr3+gr4+gr5+gr6;
				gsTotal=gs1+gs2+gs3+gs4+gs5+gs6;
				document.getElementById("gr7").innerText=grTotal;
				document.getElementById("gs7").innerText=gsTotal;
				
				total=salnum+gsTotal;
				document.getElementById("total").innerText=total;
			}
		</script>
	</head>
	<!-- body、div是html,class是css,text-center是bootstrap -->
	<body>
		<div class="container text-center">
			<h1>个人社保计算软件-Web版-2017117205邓子琪</h1>
			<table class="table table-bordered  text-center">
				<tr>
					<td>工资</td>
					<td colspan="3">
						<input id="salary" class="form-control" type="text" placeholder="请输入工资" />
					</td>
					<td>
						<button  onclick="calc()" class="btn btn-danger btn-block">计算</button>
					</td>
				</tr>
				<tr class="bg-primary">
					<td>险种</td>
					<td >个人%</td>
					<td>个人</td>
					<td>公司%</td>
					<td>公司</td>
				</tr>
				<tr>
					<td>养老</td>
					<td>8%</td>
					<td id="gr1"></td>
					<td>20%</td>
					<td id="gs1"></td>
				</tr>
				<tr>
					<td >医疗</td>
					<td>2%</td>
					<td id="gr2"></td>
					<td>6%</td>
					<td id="gs2"></td>
				</tr>
				<tr>
					<td>失业</td>
					<td>0.5%</td>
					<td id="gr3"></td>
					<td>1.5%</td>
					<td id="gs3"></td>
				</tr>
				<tr>
					<td>工伤</td>
					<td>0%</td>
					<td id="gr4"></td>
					<td>0.5%</td>
					<td id="gs4"></td>
				</tr>
				<tr>
					<td>生育</td>
					<td>0%</td>
					<td id="gr5"></td>
					<td>0.8%</td>
					<td id="gs5"></td>
				</tr>
				<tr>
					<td>公积金</td>
					<td>12%</td>
					<td id="gr6"></td>
					<td>12%</td>
					<td id="gs6"></td>
				</tr>
				<tr>
					<td>合计</td>
					<td >个人合计</td>
					<td id="gr7"></td>
					<td>公司合计</td>
					<td id="gs7"></td>
				</tr>
				<tr>
					<td>总额</td>
					<td id="total" colspan="4"></td>
				</tr>
			</table>
		</div>
		
	</body>
</html>
